<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-map-draw/Draw_bak.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="global.html#~event:change">change</a></li><li></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="global.html#event:drawend">drawend</a></li><li><a href="global.html#event:modifyend">modifyend</a></li><li><a href="global.html#event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="global.html#event:on-draw">on-draw</a></li><li><a href="global.html#event:on-draw-end">on-draw-end</a></li><li><a href="global.html#event:on-edit-start">on-edit-start</a></li><li><a href="global.html#event:on-finish-draw">on-finish-draw</a></li><li><a href="global.html#event:on-finish-edit">on-finish-edit</a></li><li><a href="global.html#event:on-inited">on-inited</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#finish">finish</a></li><li><a href="global.html#modify">modify</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-map-draw/Draw_bak.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
&lt;MyMapPlacement  :placement="placement" :margin="[10]" theme="light" >
  &lt;div class="my-map-draw">
    &lt;div class="inner-warp" :style="{'width': `${width * 50}px`}">
      &lt;slot name="type-buttons">
        &lt;div  class="type-btns-warp clear" >
          &lt;div class="button" v-for="(item, index) in buttonList" :key="index" :title="item.name" @click="draw(item.type)"> 
            &lt;img class="icon" :src="item.img" />
            &lt;div class="name">{{item.name}}&lt;/div>
          &lt;/div>
        &lt;/div>
      &lt;/slot>
      &lt;slot name="tool-buttons">
        &lt;div v-if="useTools" class="tools-btns-warp">
          &lt;div :class="{'button': true, 'active': editingFeature}" @click="deleteClickHandle">
            删除
          &lt;/div>
          &lt;div v-if="isDrawing" :class="{'button': true, 'active': isDrawing}" @click="cancleClickHandle">
            取消
          &lt;/div> 
          &lt;div v-if="!isDrawing" :class="{'button': true, 'active': editingFeature}" @click="finishClickHandle">
            完结
          &lt;/div>
          &lt;div :class="{'button': true, 'active': true}" @click="clearClickHandle">
            清空
          &lt;/div>
          &lt;div :class="{'button': true, 'active': true}" @click="getClickHandle">
            获取
          &lt;/div>
        &lt;/div>
      &lt;/slot>
      &lt;slot name="style-tools">
        &lt;div class="style-btns-warp" v-if="useStyle">
          &lt;div class="color-input-item">
            背景色：&lt;input class="color-select" type="color" v-model="editStyle.fillColor" @change="styleInputChange"  />  
          &lt;/div> 
          &lt;div class="color-input-item">
            背景透明度： 
            &lt;input  class="num-select" type="number" :min="0" :max="1" :step="0.1" v-model="editStyle.fillOpacity" @change="styleInputChange"  />   
          &lt;/div> 

          &lt;div class="color-input-item">
            边框色：&lt;input class="color-select" type="color" v-model="editStyle.strokeColor" @change="styleInputChange"  />  
          &lt;/div> 
          &lt;div class="color-input-item">
            边框宽度： 
            &lt;input  class="num-select" type="number" :min="0" :max="10" :step="1" v-model="editStyle.strokeWidth" @change="styleInputChange"  />   
          &lt;/div>
          &lt;div class="color-input-item">
            透明度： 
            &lt;input  class="num-select" type="number" :min="0" :max="1" :step="0.1" v-model="editStyle.opacity" @change="styleInputChange"  />  
            
          &lt;/div>  
        &lt;/div>
      &lt;/slot>
    &lt;/div>
  &lt;/div>  
&lt;/MyMapPlacement>
&lt;/template>
&lt;style lang="scss" scope>
&lt;/style>
&lt;script>
import {MyMapPlacement} from '$ui/map'
import OlPlot from 'ol-plot'
import 'ol-plot/dist/ol-plot.css'
import { getLayerByLayerName } from 'ol-plot/src/Utils/layerUtils'
import {colorData} from '$ui/utils/color'
import parseStyle from '../../utils/style'
const context = require.context('../../sources/draw/icon/', true, /\.(png|jpg)$/);

const colorRgba = function (color, opacity = 1) {
  const data = colorData(color)
  const rgb = data ? data._rgb : '0,0,0'
  return `rgba(${rgb},${opacity})`
} 
const TYPES_ARR = [
  // {type: 'TextArea', name: '文本标绘'},
  {type: 'Point', name: '点'},
  {type: 'Polyline', name: '线'},
  {type: 'Curve', name: '曲线'},
  {type: 'Arc', name: '弓形'},
  {type: 'Circle', name: '圆'},
  {type: 'FreeHandLine', name: '自由线'},
  {type: 'RectAngle', name: '矩形'},
  {type: 'Ellipse', name: '椭圆'},
  {type: 'Lune', name: '弓形'},
  {type: 'Sector', name: '扇形'},
  {type: 'ClosedCurve', name: '闭合曲面'},
  {type: 'Polygon', name: '多边形'},
  {type: 'FreePolygon', name: '自由面'},
  {type: 'GatheringPlace', name: '集结地'},
  {type: 'DoubleArrow', name: '双箭头'},
  {type: 'StraightArrow', name: '细直箭头'},
  {type: 'FineArrow', name: '粗单尖头箭头'},
  {type: 'AttackArrow', name: '进攻方向'},
  {type: 'AssaultDirection', name: '粗单直箭头'},
  {type: 'TailedAttackArrow', name: '进攻方向（尾）'},
  {type: 'SquadCombat', name: '分队战斗行动'},
  {type: 'TailedSquadCombat', name: '分队战斗行动（尾）'},
  {type: 'RectFlag', name: '矩形标志旗'},
  {type: 'TriangleFlag', name: '三角标志旗'},
  {type: 'CurveFlag', name: '曲线标志旗'}
]

const initBtnList = function(vue) {
  let _TYPES_ARR = []
  if (vue.useText) {
    _TYPES_ARR = _TYPES_ARR.concat(TYPES_ARR).concat([{type: 'TextArea', name: '文本标绘'}])
  } else {
    _TYPES_ARR = _TYPES_ARR.concat(TYPES_ARR)
  }
  if (!vue.types.length) {
    return _TYPES_ARR.map((item) => {
      return {
        ...item,
        img: context(`./${item.type}.png`)
      }
    })
  } else {
    const arr = []
    vue.types.forEach((item) => {
      if (typeof item === 'string') {
        const target = _TYPES_ARR.find((obj) => {
          return obj.type === item
        })
        if (target) {
          arr.push({
            ...target, 
            img: context(`./${target.type}.png`)
          })
        }
      } else {
        const target = _TYPES_ARR.find((obj) => {
          return obj.type === item.type
        })
        if (target) {
          arr.push({
            ...target, 
            ...{img: ''},
            ...{img: context(`./${item.type}.png`)}, 
            ...item
          })
        }
      }
    })
    return arr
  }
} 
export default {
  name: 'MyMapDraw',
  components: {MyMapPlacement},
  inject: ['myMap'],
  props: {
    types: {
      type: Array,
      default: () => { return [] }
    },
    placement: {
      type: String,
      default: 'right-center'
    },
    width: {
      type: Number,
      default: 4
    }, 
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    editAfterDraw: {
      type: Boolean,
      default: true
    },
    useTools: {
      type: Boolean,
      default: true
    },
    useText: {
      type: Boolean,
      default: false
    },
    useStyle: {
      type: Boolean,
      default: true
    } 
  },
  data() {
    return {
      buttonList: initBtnList(this),
      map: null,
        
      plot: null, 
      
      isDrawing: false,
      isEditing: false,

      editingFeature: null,
      // ----------------
      editStyle: {
        fillColor: '#cccccc',
        fillOpacity: 1,
        fill: '',
        strokeColor: '#000000',
        strokeWidth: 2,
        opacity: 1
      },
      featuresMap: {}
    }
  },
  computed: {},
  watch: {
    types() {
      this.buttonList = initBtnList(this)
    }
  },
  methods: {
    ready(map) {
      this.map = map

      this.plot = new OlPlot(this.map, {
        zoomToExtent: false,
        ...this.options
      })

      this.plotLayer = getLayerByLayerName(this.map, this.plot.plotUtils.layerName)
      
      /**
       * 画图工具初始化完成事件
       * @event on-inited
       * @param {Object} plot
       */
      this.$emit('on-inited', this.plot)
      this.plot.plotDraw.on('drawEnd', this.drawEndHandle)
    },

    draw(type) {
      this.isDrawing = true
      /**
       * 开始添加图形
       * @event on-draw
       */
      this.$emit('on-draw')
      this.plot.plotEdit.deactivate()
      this.isEditing = false 
      this.plot.plotDraw.active(type)
    },
    drawEndHandle(e) {
      this.isDrawing = false
      const feature = e.feature

      if (this.useStyle) {
        const styleOpt = this.setStyleOpt()
        const style = this.styleInit(styleOpt)

        feature.setStyle(style)
      }

      /**
       * 当前画图完结事件
       * @event on-draw-end
       * @param {Object} feature
       */
      this.$emit('on-draw-end', feature) 
        
      const currentId = new Date().getTime()
      feature.setId(currentId)
      this.featuresMap[currentId] = feature

      if (this.editAfterDraw) {
        this.editingFeature = feature
        this.plot.plotEdit.activate(feature)
        this.isEditing = true
        /**
         * 开始修改图形
         * @event on-edit-start
         * @param {Object} feature
         */
        this.$emit('on-edit-start', feature) 
      } 
    },
    cancleClickHandle() {
      this.finishDraw()
      this.finishEdit()
    },  
    deleteClickHandle() {
      if (this.editingFeature) {
        this.plot.plotEdit.deactivate()
        this.isEditing = false
        this.plotLayer.getSource().removeFeature(this.editingFeature)
        this.editingFeature = null  
      }
    },
    finishClickHandle() {
      if (this.editingFeature) {
        this.finishEdit()
      } else {
        this.finishDraw()
      }
    },
    clearClickHandle() {
      this.plot.plotUtils.removeAllFeatures()
      this.editingFeature = null
      this.isEditing = false
      this.isDrawing = false
    },
    getClickHandle() {
      this.$emit('on-getAll', this.featuresMap)
      return this.featuresMap
    },

    finishDraw() {
      if (this.plot.plotDraw.isDrawing()) {
        this.isDrawing = false
        this.plot.plotDraw.disActive()
        /**
         * 添加图形结束事件（不是完结，强制结束）
         * @event on-finish-draw
         */
        this.$emit('on-finish-draw')
      }
    },
    finishEdit() {
      this.plot.plotEdit.deactivate()
      /**
       * 完成修改图形
       * @event on-finish-edit
       */
      this.$emit('on-finish-edit')
      this.editingFeature = null
      this.isEditing = false 
    },
    editFeature(feature) { 
      // console.log('editNow', feature)
      if (feature &amp;&amp; feature.get('isPlot') &amp;&amp; !this.plot.plotDraw.isDrawing()) {
        if (!this.isEditing) {
          this.editingFeature = feature
          this.plot.plotEdit.activate(feature)
          this.isEditing = true
          this.$emit('on-edit-start', feature)
        } else {
          this.finishEdit()
        }
      } else {
        console.log('无法编辑此图形')
      }
    },
    setStyleOpt() {
      const style = {}
      const fillOpacity = Math.max(0, Math.min(this.editStyle.fillOpacity, 1))
      const strokeWidth = Math.max(0, Math.min(this.editStyle.strokeWidth, 10))
      const opacity = Math.max(0, Math.min(this.editStyle.opacity, 1))
      style.fill = colorRgba(this.editStyle.fillColor, fillOpacity)
      style.strokeWidth = strokeWidth
      style.strokeColor = this.editStyle.strokeColor
      style.opacity = opacity
      
      return style 
    },
    styleInit(styleOpt) {
      return parseStyle({ 
        opacity: styleOpt.opacity,
        fill: styleOpt.fill,
        stroke: {
          color: styleOpt.strokeColor,
          width: styleOpt.strokeWidth
        }
      })
    },
    styleInputChange() {
      if (this.editingFeature) {
        const styleOpt = this.setStyleOpt()
        const style = this.styleInit(styleOpt)
        this.editingFeature.setStyle(style)
      }
    } 
  },
  created() {
    this.myMap.mapReady(this.ready)
  },
  mounted() {
  }
}
&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 20:58:01 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
